<template>
<div class="console">
 <el-row :gutter="30">
 <!-- 一号注液管 -->
      <div class="first">
        <dv-water-level-pond :config="firstwater" style="width:150px;height:200px" />
            <el-button class="set" type="primary" circle  @click="set = true">设置</el-button>
            <el-dialog
            title="设置"
            :visible.sync="set"
            width="30%">
            <el-row :gutter="20">
              <el-col :span="6"><span class="span">注液管高度</span></el-col>
              <el-col :span="16"><el-input v-model="realtubeheight" placeholder="请输入注液管高度"></el-input></el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="setHeight">确 定</el-button>
            </span>
          </el-dialog>
<!-- 注液管展示区域 -->
        <div class="panel">
            <h3>一号注液管</h3>
            <h3>注液管高度：{{pipeInformation.first.pipeHeight}} cm</h3>
            <h3>液面高度：{{pipeInformation.first.liquidLevel}} cm</h3>
            <h3>注液量：{{pipeInformation.first.injectionVolume}} L</h3>
            <h3>阀门状态：{{pipeInformation.first.valveStatus}}</h3>
            <el-button id="button" type="primary" plain  @click="firstchange" v-loading="contordialog">{{conturn}}</el-button>
            <el-button type="success"  @click="firstopen" v-show="firstShow" v-loading="dialog">阀门控制</el-button>
        </div>
      </div>
      <div class="second">
        <dv-water-level-pond :config="secondwater" style="width:150px;height:200px" />
            <el-button class="set" type="primary" circle @click="set = true">设置</el-button>
            <el-dialog
            title="设置"
            :visible.sync="set"
            width="30%">
            <el-row :gutter="20">
              <el-col :span="6"><span class="span">注液管高度</span></el-col>
              <el-col :span="16"><el-input v-model="realtubeheight" placeholder="请输入注液管高度"></el-input></el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="setHeight">确 定</el-button>
            </span>
          </el-dialog>
<!-- 注液管展示区域 -->
        <div class="panel">
            <h3>二号注液管</h3>
            <h3>注液管高度：{{pipeInformation.second.tubeheight}}m</h3>
            <h3>液面高度：{{pipeInformation.second.height}}m</h3>
            <h3>注液量：{{pipeInformation.second.liquidVolume}}L</h3>
            <h3>阀门状态：{{pipeInformation.second.Isopen}}</h3>
            <el-button type="primary" plain  @click="secondchange">手动控制</el-button>
            <el-button type="success"  @click="secondopen" v-show="secondShow">阀门控制</el-button>
        </div>
      </div>
      <div class="three">
        <dv-water-level-pond :config="threewater" style="width:150px;height:200px" />
            <el-button class="set" type="primary" circle @click="set = true">设置</el-button>
            <el-dialog
            title="设置"
            :visible.sync="set"
            width="30%">
            <el-row :gutter="20">
              <el-col :span="6"><span class="span">注液管高度</span></el-col>
              <el-col :span="16"><el-input v-model="realtubeheight" placeholder="请输入注液管高度"></el-input></el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="setHeight">确 定</el-button>
            </span>
          </el-dialog>
<!-- 注液管展示区域 -->
        <div class="panel">
            <h3>三号注液管</h3>
            <h3>注液管高度：{{pipeInformation.three.tubeheight}}m</h3>
            <h3>液面高度：{{pipeInformation.three.height}}m</h3>
            <h3>注液量：{{pipeInformation.three.liquidVolume}}L</h3>
            <h3>阀门状态：{{pipeInformation.three.Isopen}}</h3>
            <el-button type="primary" plain  @click="threechange">手动控制</el-button>
            <el-button type="success"  @click="threeopen" v-show="threeShow">阀门控制</el-button>
        </div>
      </div>
      <div class="four">
        <dv-water-level-pond :config="fourwater" style="width:150px;height:200px" />
            <el-button class="set" type="primary" circle @click="set = true">设置</el-button>
            <el-dialog
            title="设置"
            :visible.sync="set"
            width="30%">
            <el-row :gutter="20">
              <el-col :span="6"><span class="span">注液管高度</span></el-col>
              <el-col :span="16"><el-input v-model="realtubeheight" placeholder="请输入注液管高度"></el-input></el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="setHeight">确 定</el-button>
            </span>
          </el-dialog>
<!-- 注液管展示区域 -->
        <div class="panel">
            <h3>四号注液管</h3>
            <h3>注液管高度：{{pipeInformation.four.tubeheight}}m</h3>
            <h3>液面高度：{{pipeInformation.four.height}}m</h3>
            <h3>注液量：{{pipeInformation.four.liquidVolume}}L</h3>
            <h3>阀门状态：{{pipeInformation.four.Isopen}}</h3>
            <el-button type="primary" plain  @click="fourchange">手动控制</el-button>
            <el-button type="success"  @click="fouropen" v-show="fourShow">阀门控制</el-button>
        </div>
      </div>
 </el-row>
    </div>
</template>
<script>
export default {
  name: "Valvecontrol",
  data () {
    return {
      // 开关状态
      lastswitchStatus: '',
      // 控制模式的切换
      conturn: '手动控制',
      // 阀门开关传值
      switchStatus: '',
      // 控制模式传值
      num:'',
      // 阀门开关按钮加载
      dialog:false,
      // 控制状态按钮加载
      contordialog:false,
      // 注液管高度
      realtubeheight: '',
      set: false,
     firstwater: {
        data: [66, 45, 30],
        shape: 'roundRect',
      },
     secondwater: {
        data: [66, 45, 30],
        shape: 'roundRect',
      },
     threewater: {
        data: [66, 45, 30],
        shape: 'roundRect',
      },
     fourwater: {
        data: [66, 45, 30],
        shape: 'roundRect',
      },
      firstShow: false,
      secondShow: false,
      threeShow: false,
      fourShow: false,
      pipeInformation: {
        first: {},
        second: {
          tubeheight: '60',
          height: '50',
          liquidVolume: '2.3',
          Isopen: '关'
        },
        three: {
          tubeheight: '70',
          height: '45',
          liquidVolume: '1.3',
          Isopen: '关'
        },
        four: {
          tubeheight: '80',
          height: '60',
          liquidVolume: '3.4',
          Isopen: '关'
        }
      }
    }
  },
  created () {
      this.gettubeList()
    const params1 = {
      pipeId: '1'
    }
    this.$http.get('/dataCenter/queryPipeDataByTd?' + 'pipeId=' + params1.pipeId)
      .then(res => {
        if (res.data.data.consoleStatus === 2) {
          this.firstShow = true
        } else {
          this.firstShow = false
        }
      })
    if (this.firstShow === true) {
      this.conturn = '自动控制'
    } else {
      this.conturn = '手动控制'
    }
        },
  methods: {
    // 获取注液管的数据
     gettubeList () {
      const params = {
      pipeId: '1'
      }
      this.$http.get('/dataCenter/queryPipeDataByTd?' + 'pipeId=' + params.pipeId)
      .then(res => {
        console.log('注液管rrrrr', res)
      if (res.status !== 200) {
        return this.$message.error('获取注液管信息失败！')
      } else {
      // 把isopen的0转换为关
        this.lastswitchStatus = res.data.data.valveStatus
      if (res.data.data.valveStatus === 0) {
        res.data.data.valveStatus = '关'
      } else {
        res.data.data.valveStatus = '开'
      }
        res.data.data.pipeHeight = parseInt(res.data.data.pipeHeight*0.1)
        res.data.data.liquidLevel = parseInt(res.data.data.liquidLevel*0.1)
        res.data.data.injectionVolume = parseInt(res.data.data.injectionVolume*0.1)
      this.pipeInformation.first = res.data.data
      }
      })
    },
    // 设置注液管高度
     setHeight () {
      const params = {
      id: '1',
      height: this.realtubeheight
      }
      console.log('注液管高度', params)
      this.$http.post('/console/modifyPipeHeight?' + 'pipeId=' + params.pipeId + '&height=' + params.height)
      .then(res => {
        console.log('注液管高度信息', res)
      if (res.status !== 200) {
        return this.$message.error('注液管高度提交失败！')
      }
      // this.$message.success('注液管高度提交成功！')
      this.gettubeList ()
      this.set = false
      })
    },
    // 操作阀门开关
    async firstopen (id) {
      this.dialog = true
      console.log("3333333333333333333")
      // const params = {
      // pipeId: '1'
      // }
      // this.$http.get('/dataCenter/queryPipeDataByTd?' + 'pipeId=' + params.pipeId)
      // .then(res => {
        //console.log('res', res)
      if (this.lastswitchStatus === 1) {
        this.lastswitchStatus = 0
      } else {
        this.lastswitchStatus = 1
      }
      const params2 = {
      pipeId: '1',
      switchStatus:this.lastswitchStatus
      }
        console.log('params2', params2)
      console.log("2222222222222222222222222")
      this.$http.post('/console/modifyValveStatus',params2)
      .then(res => {
        console.log('控制开关信息', res)
      if (res.data.status !== 200) {
      this.$message.error(res.data.msg)
      this.dialog = false
      } else {
        if(this.pipeInformation.first.valveStatus === '开'){
        this.pipeInformation.first.valveStatus = '关'
       }else  {
        this.pipeInformation.first.valveStatus = '开'
      }
      this.$message.success(res.data.msg)
      this.dialog = false
      }
      })
      // })
    },
    secondopen () {
      // 询问用户是否操作阀门
      const confirmRusult = this.$confirm('此操作将打开阀门, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmRusult !== 'confirm') {
        return this.$message.info('已经取消了操作')
      }
      if (this.pipeInformation.second.Isopen === '开'){
        this.pipeInformation.second.Isopen = '关'
      }else{
        this.pipeInformation.second.Isopen = '开'
      }
    },
    threeopen () {
      // 询问用户是否操作阀门
      const confirmRusult = this.$confirm('此操作将打开阀门, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmRusult !== 'confirm') {
        return this.$message.info('已经取消了操作')
      }
      if (this.pipeInformation.three.Isopen === '开'){
        this.pipeInformation.three.Isopen = '关'
      }else{
        this.pipeInformation.three.Isopen = '开'
      }
    },
    fouropen () {
      // 询问用户是否操作阀门
      const confirmRusult = this.$confirm('此操作将打开阀门, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmRusult !== 'confirm') {
        return this.$message.info('已经取消了操作')
      }
      if (this.pipeInformation.four.Isopen === '开'){
        this.pipeInformation.four.Isopen = '关'
      }else{
        this.pipeInformation.four.Isopen = '开'
      }
    },
    // 切换控制模式
    firstchange (){

      const params1 = {
        pipeId: '1'
      }
      this.$http.get('/dataCenter/queryPipeDataByTd?' + 'pipeId=' + params1.pipeId)
        .then(res => {
          if (res.data.data.consoleStatus === 2) {
            this.firstShow = true
          } else {
            this.firstShow = false
          }
          document.getElementById("button").style.value = "自动控制"
          this.contordialog = true
          this.$message('正在请求切换控制模式')
          if (this.pipeInformation.first.consoleStatus === 2) {
            this.num = 0
          } else {
            this.num = 1
          }
          const params = {
            pipeId: "1",
            controlState: this.num
          }
          console.log('params', params)
          this.$http.post('/console/modifyConsoleStatus', params)
            .then(res => {
              console.log('控制状态接口的返回值', res)
              if (res.data.status === 200) {
                this.$message.success('切换控制模式成功')
                if (this.firstShow === true) {
                  this.conturn = '手动控制'
                } else {
                  this.conturn = '自动控制'
                }
                this.firstShow = !this.firstShow
                this.contordialog = false
              } else {
                this.$message.error('切换控制模式失败')
                this.contordialog = false
              }
              //this.gettubeList()
            })
        })
    },
    secondchange (){
      this.secondShow = !this.secondShow
      if (this.secondShow === true){
      this.$message.success('启动手动控制，阀门控制按钮已激活 ')
      } else{
      this.$message.error('关闭手动控制，阀门控制按钮消失 ')
      }
    },
    threechange (){
      this.threeShow = !this.threeShow
      if (this.threeShow === true){
      this.$message.success('启动手动控制，阀门控制按钮已激活 ')
      } else{
      this.$message.error('关闭手动控制，阀门控制按钮消失 ')
      }
    },
    fourchange (){
      this.fourShow = !this.fourShow
      if (this.fourShow === true){
      this.$message.success('启动手动控制，阀门控制按钮已激活 ')
      } else{
      this.$message.error('关闭手动控制，阀门控制按钮消失 ')
      }
    },
  }
}
</script>
 <style lang="scss" scoped>
.span {
  top: 10px;
}
.el-col {
  padding: 0;
}
 .set {
   margin-left: 50px;
   margin-top: 11px;
 }
.first {
  position: absolute;
  width: 40vw;
  height: 45vh;
  top: 20px;
  left: 100px;
}
.panel{
  width: 250px;
  position: absolute;
  padding: 10px 20px 20px 25px;
  top: -40px;
  left: 30%;
}
.second {
  position: absolute;
  width: 40vw;
  height: 45vh;
  top: 20px;
  left: 650px;
}
.three {
  position: absolute;
  width: 40vw;
  height: 45vh;
  top: 300px;
  left: 100px;
}
.four {
  position: absolute;
  width: 40vw;
  height: 45vh;
  top: 300px;
  left: 650px;
}
h3{
  color:  rgb(143, 143, 170);
}
</style>
